<script>
import {mapGetters} from "vuex";
import RoleDialog from "@/views/settings/components/roleTable/roleDialog.vue";
import PremDialog from "@/views/settings/components/roleTable/premDialog.vue";

export default {
  name: "roleTable",
  components: {PremDialog, RoleDialog},
  data() {
    return {
      /* 分页参数 */
      pagePrams: {
        page: 1,
        pagesize: 10,
      },
      /* 是否显示添加和编辑角色的弹框 */
      roleVisible: false,
      /* 是否显示分配权限的弹框 */
      showPerDialog: false,
    }
  },
  methods: {
    /* fetchRoleList()函数的作用(派发一个action发送请求获取角色列表) */
    async fetchRoleList() {
      try {
        await this.$store.dispatch('settingsStore/fetchRoleList', this.pagePrams)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 分页器当前页展示的数据条数发生变化的回调函数 */
    handleSizeChange(size) {
      this.pagePrams.pagesize = size
      this.fetchRoleList()
    },
    /* 分页器页码发生变化的回调函数 */
    handleCurrentChange(page) {
      this.pagePrams.page = page
      this.fetchRoleList()
    },
    /* 点击添加角色按钮的回调函数 */
    handleAddRole() {
      this.roleVisible = true
    },
    /* 点击删除角色按钮的回调函数 */
    async handleDeleeRole(role) {
      // 调用$confirm()函数，询问用户是否执行此操作，该函数返回的是一个Promise对象
      const confirm = await this.$confirm(`删除${role.name}, 是否继续?`, '提示', {type: 'warning'}).catch(error => error)
      // 点击了取消则return出去，不执行下面的逻辑
      if (confirm === 'cancel') return
      try {
        // 调用deleteRole派发一个action携带当前角色的id去发送删除角色的请求
        const message = await this.$store.dispatch('settingsStore/deleteRole', role.id)
        // 判断当前页是否被删除的只剩下最后一条数据了，如果是则会到前一页
        if (this.roleList.length <= 1 && this.pagePrams.page > 1) this.pagePrams.page--
        // 调用fetchRoleList派发action重新获取角色列表
        await this.fetchRoleList()
        // 提示用户删除角色成功
        this.$message.success(message)
      } catch (error) {
        // 删除角色失败
        this.$message.error(error.message)
      }
    },
    /* 点击编辑角色按钮的回调函数*/
    async handleEditRole(role) {
      // 通过ref拿到子组件实例调用子组件的findRoleDetail()函数传入当前的角色id派发action获取角色详情
      await this.$refs.roleDialog.findRoleDetail(role.id)
      // 打开弹框
      this.roleVisible = true
    },
    /*handleEditRole(role) {
      // 通过ref拿到子组件实例调用子组件的findRoleDetail()函数传入当前的角色信息
      this.$refs.roleDialog.findRoleDetail(role)
      // 打开弹框
      this.roleVisible = true
    },*/
    /* 添加和编辑角色组件的自定义事件 */
    changePage(page) {
      this.pagePrams.page = page
    },
    /* 点击给角色分配权限按钮的回调函数  */
    async handleassignPrem(role) {
      /* 使用ref获取子组件实例调用子组件的fetchPermissionList()函数派发action获取所有权限点 */
      await this.$refs.premDialog.fetchPermissionList()
      /* 使用ref获取子组件实例调用子组件的findPermIds(角色ID)函数派发action获取当前角色所拥有的权限点 */
      await this.$refs.premDialog.findPermIds(role.id)
      this.showPerDialog = true
    }
  },
  computed: {
    /* 使用mapGetters将settingsStore下的getters映射为组件实例的属性 */
    ...mapGetters('settingsStore', ['roleList', 'total'])
  },
  mounted() {
    /* 组件挂载完毕调用fetchRoleList()派发action获取角色列表 */
    this.fetchRoleList()
  }
}
</script>

<template>
  <div class="roleTable">
    <el-button type="primary" icon="el-icon-plus" @click="handleAddRole">添加角色</el-button>
    <el-table border stripe :data="roleList">
      <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
      <el-table-column label="角色ID" prop="id" align="center"></el-table-column>
      <el-table-column label="角色名称" prop="name" align="center"></el-table-column>
      <el-table-column label="角色描述" prop="description" align="center"></el-table-column>
      <el-table-column label="操作" prop="" align="center">
        <template #default="{row}">
          <el-button type="success" icon="el-icon-wind-power" @click="handleassignPrem(row)">分配权限</el-button>
          <el-button type="warning" icon="el-icon-edit" @click="handleEditRole(row)">编辑角色</el-button>
          <el-button type="danger" icon="el-icon-delete" @click="handleDeleeRole(row)">删除角色</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagePrams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pagePrams.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    <!--添加和编辑角色的弹框组件-->
    <role-dialog :role-visible.sync="roleVisible" :close-on-click-modal="false" append-to-body ref="roleDialog" :pagePrams="pagePrams" @changePage="changePage"></role-dialog>
    <!--分配权限的弹框-->
    <prem-dialog :show-per-dialog.sync="showPerDialog" append-to-body ref="premDialog"></prem-dialog>
  </div>
</template>

<style scoped lang="scss">
.roleTable {
  .el-pagination {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
